@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;/*设置全局字体和内外边距*/
}

body
{
    background: #000 url(bg.jpg);/*设置body部分的背景*/
    background-attachment: fixed;/*设置body部分的背景位置固定，不会因为滚动而变化*/
    background-blend-mode: hard-light;/*设置body部分背景图片混合模式为强光*/
}

.container{
    position: absolute;/*设置container部分较上一级位置absolute*/
    top: 80px;
    left: 100px;
    right: 100px;
    bottom: 80px;/*设置上下左右位置*/
    background: url(bg.jpg);/*设置背景为图片*/
    background-attachment: fixed;/*设置container部分的背景位置固定，不会因为滚动而变化*/
    display: flex;/*设置为弹性布局*/
    justify-content: center;/*在x轴正对齐*/
    align-items: center;/*在交叉轴上中心对齐*/
    flex-direction: column;/*决定主轴的的方向，column为垂直方向起点上沿*/
    box-shadow: 0 50px 50px rgba(0,0,0,0.5),
                0 0 0 100px rgba(0,0,0,.1);/*设置盒子的阴影*/
}

.container h2 {
    text-align: center;/*中心对齐*/
    font-size: 10em;/*字体大小*/
    line-height: 0.7em;/*行高，控制字的位置*/
    color: #333;/*字的颜色*/
    margin-top: -80px;/*外上边距控制上移*/
}

.container h2 span{
    display: block;/*设置为块级元素*/
    font-weight: 300;/*字体粗细*/
    letter-spacing: 6px;/*文字间的空格大小*/
    font-size: 0.2em;/*字体大小*/
}
.countdown{
    display: flex;/*设置为弹性布局*/
    margin-top: 50px;/*上外边距*/
}
.countdown div{
    position: relative;/*相对于上一级的位置*/
    width: 100px;
    height: 100px;/*宽度和高度*/
    line-height: 100px;/*行高*/
    text-align: center;/*文本居中对齐*/
    background: #333;/*背景*/
    color: #fff;/*颜色*/
    margin: 0 15px;/*外边距*/
    font-size: 3em;/*字体大小*/
    font-weight: 500;/*字体粗细*/
}
.countdown div:before{
    content: '';/*等待后续文字填充*/
    position: absolute;/*绝对位置设定*/
    bottom: -30px;
    left: 0;/*下上位置*/
    width: 100%;
    height: 35px;/*宽度和高度*/
    background: #ff0;/*背景*/
    color: #333;/*颜色*/
    font-size: 0.35em;/*字体大小*/
    line-height: 35px;/*行高*/
    font-weight: 300;/*字体粗细*/
}
.container #day:before{
    content: 'Days';
}
.container #hour:before{
    content: 'Hours';
}
.container #minute:before{
    content: 'Minutes';
}
.container #second:before{
    content: 'Seconds';
}/*before填充content的部分*/